<html>
<head>
	<TITLE>オンライン会議室予約システム</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
<script type="text/javascript">
$(document).ready(function(){
	query(1);	
	$('#record_view').hide();
	$('#edit_form').attr('disabled',true);
	$("#putDate").datepicker({dateFormat:"dd/mm/yy"});
});
function query(page){
	var room_name=$('#search_roomname').val();
	var type_room=$('#type_room').val();
	var per_page=$('#per_page').val();
	var path='room_name='+room_name+'&type_room='+type_room+'&page='+page+'&per_page='+per_page;
    $.ajax({
      	type:"POST",
      	url: "data/room/room_user/total_page.php",
      	data: path,
        async: false,
    	success: function(data) {
            //alert(data);
    		$("#totalPage").html(data);
            $('#total_row').val(data);
			load_listpage(page);			
		}
	});		 
}

function load_listpage(page){
       	    var room_name=$('#search_roomname').val();
			var type_room=$('#type_room').val();
			var per_page=$('#per_page').val();
			var path='room_name='+room_name+'&type_room='+type_room+'&page='+page+'&per_page='+per_page;
            $.ajax({
      			type:"POST",
      			url: "data/room/room_user/list_page.php",
      			data: path,
                async: true,
    			success: function(data) {
					//alert(data);
                    var total=$('#total_row').val();
					
                    if(total/per_page>1){
						//alert(data);
    				    $("#listpage_data").html(data);
                        $('#listpage').show();
                    }else {
                        $("#listpage_data").html("");
                        $('#listpage').hide();                        
                    }
                    $.ajax({
        		      	type:"POST",
        		      	url: "data/room/room_user/list_room.php",
        		      	data: path,
        		        async: true,
        		    	success: function(data) { 
        					$('#TabContentDiv').html(data);
        				}
        			});
			     }
		     }); 
    }

function open_room(id){	
	get_room_info(id);
}

function get_room_info(id){
	$.getJSON("data/room/detail_room.php",'room_id='+id, function(data){ 
			$("#form_room").html(data.description);
		});
}

</script>
</head>
<body >
	<div id="tabheader" class="title" style="width:99.4%">会議室情報</div>
    <table class="ctable" width="100%">
    	<tr>
	   <!-- <td width="30%" style="padding-right:10px" align="right">会議室ID</td>-->
        <td width="6%"><input type="hidden" class="cinput" id="search_roomid"></td>
        <td width="10%" style="padding-right:10px" align="right">会議室名</td>
        <td width="10%"><input type="text" class="cinput" id="search_roomname"></td>
        <td width="10%" style="padding-right:10px" align="right">教室種類　</td>
        <td width="10%">
        	<select id="type_room" style="width:100%">
            	<option value='0'>全部</option>
                <option value='1'>大きい室</option>
                <option value='2'>小さい室</option>
            </select>
         </td>
        <td width="10%" align="left">
        	<input value="索引する" type="button" onClick="query(1)" style="width:80px;" class="cbutton" />
	        </td>
        </tr>
    </table>
	 <div id='TabContentDiv' class="tabContent"></div>
	 <div id="phantrang">
        	<table class="ctable"  width="100%" style="height:30px;">
            <tr align="center" height="10px;">
	            <td align="left" width="20%" style="padding-top:5px">総計
	              <div id="totalPage" style="display:inline;"></div><input type="hidden" id='total_row'>
	              室</td>
              <td style="display:inline;padding-top:5px;" width="60%"> 
                  <div id="listpage_data" style="border-style:0px;display: inline; clear:both;padding-top:5px;"></div>
              </td>
              <td width="20%"><td>
              <td align="right" width="20%" style="display:none;" id='record_view'>
                <select id="per_page" onChange="query(1)">
                    <option value="5">5 レコード</option>
                </select>
                </td>
             </tr>
         </table>   
	  
	 </div>
	 <div style="width:100%;" id="divRoomID" class="cdiv">
	</div>	
	 <div id='form_room'>			 
      </div>   
</body>
</html>